<template>
  <security-module>
    <div class="app-security-center-login__top" slot="top">
      <div class="app-security-center-login__top__title-wrapper">{{ bodyTitle }}</div>
    </div>
    <div class="app-security-center-login__center" slot="center">
      <div class="app-security-center-login__center__input-wrapper">
        <t-input name="username" size="normal" place-holder="手机号 / 邮箱" type="text" @input="handleInputForUsername"></t-input>
      </div>
      <div class="app-security-center-login__center__input-wrapper">
        <t-input name="password" size="normal" place-holder="密码" type="password" @input="handleInputForPassword"></t-input>
      </div>
      <div class="app-security-center-login__center__other-wrapper">
        <div class="app-security-center-login__center__other-wrapper__auto-login">
          <!--<t-button size="mini" type="update" @click="handleVisitorLogin">游客登陆</t-button>-->
        </div>
        <div class="app-security-center-login__center__other-wrapper__forget-password">
          <router-link to="#">忘记密码</router-link>
        </div>
        <div class="app-security-center-login__center__other-wrapper__register-user">
          <router-link to="/account/security/signup">新用户注册</router-link>
        </div>
      </div>
      <div class="app-security-center-login__center__btn-wrapper">
        <t-button name="submit" size="full" type="primary" @click="handleLogin">登录</t-button>
      </div>
    </div>
  </security-module>
</template>

<script>
  import TInput from '@/components/input';
  import TButton from '@/components/button';
  import securityModule from './module';

  export default {
    name: 'app-security-login',
    components: {
      TInput,
      TButton,
      securityModule,
    },
    data() {
      return {
        username: '',
        password: '',
        visitorUsername: 'ce',
        visitorPassword: 'x',
      };
    },
    props: {
      bodyTitle: {
        type: String,
        default: '用户登录',
      },
    },
    computed: {
      uploadUrl() {
        let url = '';
        if (process.env.NODE_ENV === 'development') {
          url = 'http://127.0.0.1:8050/api/upload';
        } else {
          url = 'https://www.todaytomato.com:8050/api/upload';
        }
        return url;
      },
    },
    methods: {
      handleVisitorLogin() {
        this.$http.request({
          url: 'api/login',
          method: 'post',
          data: {
            username: this.visitorUsername,
            password: this.visitorPassword,
          },
          transformRequest: [(data) => {
            const encodeUsername = encodeURIComponent(data.username);
            const encodePassword = encodeURIComponent(data.password);
            return `username=${encodeUsername}&password=${encodePassword}`;
          }],
        }).then((response) => {
          this.$stateHub.auth = true;
          this.$stateHub.username = response.data.username;
          this.$stateHub.rolename = response.data.rolename;
          this.$router.push('/service/charter');
        }).catch(() => {
          this.$stateHub.auth = false;
        });
      },
      handleLogin() {
        this.$http.request({
          url: 'api/login',
          method: 'post',
          data: {
            username: this.username,
            password: this.password,
          },
          transformRequest: [(data) => {
            const encodeUsername = encodeURIComponent(data.username);
            const encodePassword = encodeURIComponent(data.password);
            return `username=${encodeUsername}&password=${encodePassword}`;
          }],
        }).then((response) => {
          this.$stateHub.auth = true;
          this.$stateHub.username = response.data.username;
          this.$stateHub.rolename = response.data.rolename;
          this.$router.push('/service/charter');
        }).catch(() => {
          this.$stateHub.auth = false;
        });
      },
      handleInputForUsername(val) {
        this.username = val;
      },
      handleInputForPassword(val) {
        this.password = val;
      },
    },
  };
</script>